import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../tools/ClipStarPath.dart';

class getPetForFree extends StatefulWidget {
  @override
  getPetForFreePage createState() => getPetForFreePage();
}

class getPetForFreePage extends State<getPetForFree> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark));
    return Scaffold(
      body: SafeArea(
          child: Stack(
        children: [
          CustomScrollView(
            shrinkWrap: true,
            slivers: <Widget>[
              SliverPadding(
                padding: const EdgeInsets.all(0.0),
                sliver: SliverList(
                  delegate: SliverChildListDelegate(
                    <Widget>[
                      Stack(
                        children: [
                          SizedBox(
                            width: double.infinity,
                            child: Image.network(
                                "https://img1.baidu.com/it/u=2804737717,3397424581&fm=253&fmt=auto&app=138&f=JPEG",
                                fit: BoxFit.cover),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(10),
                            child: Container(
                              decoration: BoxDecoration(
                                borderRadius:
                                    const BorderRadius.all(Radius.circular(10)),
                                color: Colors.white.withOpacity(0.8),
                              ),
                              child: Padding(
                                padding: const EdgeInsets.all(5),
                                child: Wrap(
                                  children: [
                                    Column(
                                      children: [
                                        const Text(
                                          "免费领取神兽宝宝",
                                          style: TextStyle(
                                              color: Color(0xff747474),
                                              fontSize: 15,
                                              fontWeight: FontWeight.bold),
                                        ),
                                        getName(),
                                      ],
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      const Padding(
                          padding: EdgeInsets.all(15),
                          child: Text(
                              "每个月完成观看广告15次，可以免费领取白泽神兽宝宝一个月。（每月1日清零）\n\n*每天限观看一次广告。")),
                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 20),
                        child: Center(
                          child: Container(
                              decoration: BoxDecoration(
                                  color: const Color(0xffff5733),
                                  borderRadius: BorderRadius.circular(15)),
                              child: const Padding(
                                padding: EdgeInsets.all(10),
                                child: Text(
                                  "免费领取我的守护神兽",
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 20),
                                ),
                              )),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(bottom: 20),
                        child: Center(
                          child: Column(
                            children: const [
                              Text("5/15"),
                              Text("领取下月神兽宝宝进度"),
                            ],
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 20, bottom: 30),
                        child: Row(
                          children: [
                            getName(),
                            const Text(
                              "任性领取>>>",
                              style: TextStyle(
                                  color: Color(0xffff5733), fontSize: 20),
                            )
                          ],
                        ),
                      ),
                      const Padding(
                          padding:
                              EdgeInsets.only(left: 20, right: 20, bottom: 100),
                          child: Text(
                              "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍"))
                    ],
                  ),
                ),
              ),
            ],
          ),
          Align(
            alignment: Alignment.topRight,
            child: Padding(
              padding: const EdgeInsets.only(top: 20, right: 20),
              child: Wrap(
                children: [
                  InkWell(
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                    child: Container(
                      width: 30,
                      height: 30,
                      child: Stack(
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(5),
                            child: Container(
                              color: Colors.white,
                            ),
                          ),
                          Image.asset(
                            "assets/close.png",
                          ),
                        ],
                      ),
                      alignment: Alignment.topRight,
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      )),
    );
  }

  getName() {
    return Row(
      children: [
        const Text(
          "白泽",
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        ClipPath(
          clipper: ClipStarPath(),
          child: Container(
            width: 20,
            height: 20,
            color: Colors.red,
          ),
        )
      ],
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
    );
  }
}
